<!--
 * @FilePath     : /study_code/layui/6-4-0.html
 * @Description  : 所有配置项参数
 * @Date         : 2025-04-08 16:46:28
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-08 20:47:32
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
    <style>
      /* skin 对应 自定义样式名 ----------------------start */
      body .demo-class .layui-layer-title {
        background: #c00;
        color: #fff;
        border: none;
      }

      body .demo-class .layui-layer-btn {
        border-top: 1px solid #e9e7e7;
      }

      body .demo-class .layui-layer-btn a {
        background: #333;
      }

      body .demo-class .layui-layer-btn .layui-layer-btn1 {
        background: #999;
      }

      #contentdom {
        width: 40px;
      }
      /* skin 对应 自定义样式名 ----------------------start */
    </style>
  </head>
  <body>
    <!-- 辅助：DOM内容 -->
    <div id="contentdom" class="mine-move">可拖拽元素</div>
    <!-- <p id="contentdom" style="position: fixed; top: 200px; left: 200px;">content指定的 DOM</p> -->

    <script src="/layui/dist/layui.js"></script>
    <script>
      // type参数
      layui.use('layer', function () {
        var layer = layui.layer,
          $ = layui.$

        // var str = '我爱祖国的蓝天'
        var str = { a: '我爱祖国的蓝天', b: '晴空万里阳关灿烂' }

        layer.open({
          /**
           * @brief: 设置弹窗基本类型
           * @value {*}
           * 0 信息框（默认）
           * 1 页面层
           * 2 iframe层
           * 3 加载层
           * 4 tips层
           */
          type: 0, // 页面层

          /**
           * @brief: 设置标题内容和样式
           * @value {*}
           * {string} 纯文本，示例：'我是标题'
           * {array} 数组参数（字符串内容+样式），示例：['标题文本', 'font-size: 32px; color: red;']
           * {boolean} false 不显示标题
           */
          title: '我是标题', // 纯文本格式
          // , title: ['标题文本', 'font-size: 32px; color: red;'] // 数组参数（内容+样式）
          // , title: false // 不显示

          /**
           * @brief: 设置弹窗内容
           * @value {*}
           * {string} 普通 html 内容（会解析 html） ， 示例：'<h2>content参数配置的：普通html内容</h2>'
           * {jqElement} jq选择器
           * !注意1：最好该元素要存放在 body 最外层（body内一级位置），否则可能被其他的相对元素所影响（下面的 p#contentdom）
           * !注意2：type: 2 时正常； type: 1 时会出现 [object, object]
           */
          // @ 内容
          content: '<h2>content参数配置的：普通html内容</h2>', // 普通html内容（会解析 html）
          // , content: $('#contentdom') // 指定 DOM；
          // , content: str.a + '，' + str.b //注意，如果str是object，那么需要字符拼接
          // , type: 2 （下面的 url 需要设置type；且本地会跨域）
          // , content: 'https://www.baidu.com' // iframe 层
          // , type: 4 （下面的 url 需要设置type）
          // , content: ['内容', '#contentdom'] // iframe 层

          /**
           * @brief: 设置样式类名
           * 全局使用。
           * 即所有弹出层都默认采用，但是单个配置skin的优先级更高
           * #默认值：
           * 例如 'layui-layer-molv', 'layui-layer-lan'
           * （效果：./images/skin/1.png）
           * #自定义值：
           * 自定义的 class 名（下面的 demo-class）（定义爱上面的 style 标签内）
           * （效果：./images/skin/2.png）
           * @value {*}
           */
          // skin: 'layui-layer-molv',
          skin: 'demo-class',
          // 拓展：全局设置
          // layer.config({
          //   skin: 'demo-class'
          // })

          /**
           * @brief: 设置弹出层区域尺寸
           * @key {*} area
           * @value {string}
           * # 'auto' 默认状态下，layer 是宽高都自适应的
           * # 一个值，'600px' 自定义宽度，高度自适应
           * # 2个值 ['600px', '400px'] 宽高都自适应（原先按钮可能会溢出）
           */
          area: 'auto',
          // , area: '600px' // 自定义宽度，高度自适应
          // , area: ['600px', '400px'] // 宽高都自定义 （原先按钮可能会溢出）

          /**
           * @brief: 设置弹出层最大宽度
           * @key {*} maxWidth
           * @value {*}
           * '360px' 默认宽度尺寸
           * !注意：只有当值为 'auto' 时， maxWidth 的设定才有效。
           */
          maxWidth: '360px', // （默认）
          // , maxWidth: '80px'
          /**
           * @brief:
           * @key {*} maxWidth
           * !只有当值为 'auto' 时， maxHeight 的设定才有效。
           */
          /**
           * @brief: 设置弹出层最大高度
           * @return {*}
           */
          // @ maxHeight - 最大宽度
          // , maxHeight: '240px'

          /**
           * @brief: 设置弹出层偏移位置
           * @return {*}
           */
          // @ offset - 坐标
          // , offset: 'auto' // （默认）水平垂直居中
          // , offset: '100px' // 只定义top坐标，水平保持居中
          offset: ['100px', '50px'], // 同时定义top、left坐标
          // , offset: 't' // 快捷设置顶部坐标
          // , offset: 'r' // 快捷设置右边缘坐标
          // , offset: 'b' // 快捷设置底部坐标
          // , offset: 'l' // 快捷设置左边缘坐标
          // , offset: 'lt' // 快捷设置左上角
          // , offset: 'lb' // 快捷设置左下角
          // , offset: 'rt' // 快捷设置右上角
          // , offset: 'rb' // 快捷设置右下角

          /**
           * @brief: 设置信息框 & 加载层的图标
           * @key {*}
           * @value {number}
           * -1 不显示图标
           * 0 "黄色-叹号"图标
           * 1 "绿色-对号"图标
           * 2 "红色-叉号"图标
           * 3 "黄色-问号"图标
           * 4 "灰色-锁"图标
           * 5 "橙色-苦脸"图标
           * 6 "绿色-笑脸"图标
           */
          icon: -1,

          /**
           * @brief: 一个按钮时，设置按钮的文字内容
           * @return {*}
           */
          // @ btn 按钮
          btn: '我知道了', // 一个按钮

          /**
           * @brief: 按钮1的回调
           * @param {*} index 当前弹出层索引
           * @param {*} layero 当前弹出层DOM（最外层）
           * @return {*}
           */
          btn1: function (index, layero) {
            // , yes: function (index, layero) {
            console.log('按钮1的回调')
            console.log('按钮参数index', index)
            console.log('按钮参数layero', layero)
            layer.close(index)
          },

          /**
           * !多个按钮的回调
           */
          // , btn: ['按钮1', '按钮2', '按钮3'] // 多个按钮
          // , btn1: function (index, layero) {
          //   console.log('按钮1的回调')
          //   console.log('按钮1参数index', index)
          //   console.log('按钮1参数layero', layero)
          //   layer.close(index)
          // }
          // , btn2: function (index, layero) {
          //   console.log('按钮2的回调')
          //   console.log('按钮2参数index', index)
          //   console.log('按钮2参数layero', layero)
          // }
          // , btn3: function (index, layero) {
          //   console.log('按钮3参数index', index)
          //   console.log('按钮3参数layero', layero)
          //   console.log('按钮3的回调')
          // }

          // @ closeBtn 关闭按钮
          // , closeBtn: 0 // 不显示
          // , closeBtn: 1 // 风格1：（默认，可不设置）旋转45°的十字图标
          closeBtn: 2, // 风格2：定位在右上角的 圆形关闭图标（见图）

          // @ cancel -
          /**
           * @brief: 右上角关闭按钮触发的回调
           * @param {*} index 当前层索引参数
           * @param {*} layero 当前层的DOM对象
           * @return {*}
           */
          cancel: function (index, layero) {
            console.log('当前层索引参数', index)
            console.log('当前层的DOM对象', layero)
            if (confirm('确定要关闭么')) {
              //只有当点击confirm框的确定时，该层才会关闭
              layer.close(index)
            }
            return false // 不关闭弹出层
          },

          // @ btnAlign 按钮对齐方式
          btnAlign: 'l', // 左对齐
          // , btnAlign: 'c' // 居中对齐
          // , btnAlign: 'r' // 默认值，不用设置

          // @ end - 层销毁后触发的回调
          end: function () {
            console.log('层被销毁了')
          },

          // @ shade 遮罩（透明度+颜色）
          // , shade: .7 // 定义遮罩透明度，默认 .3
          shade: [0.5, '#393D49'], // 定义透明度 + 颜色
          // , shade: 0 // 不显示

          // @ shadeClose 点击遮罩关闭
          shadeClose: false, // （默认）点击遮罩不关闭层
          // , shadeClose: true // 点击遮罩关闭层

          // @ time 自动关闭层所需毫秒数
          tiem: 0, // （默认）不会自动关闭
          // , time: 4000 // 4s 后自动关闭 （自动关闭前手动关闭仍有用）

          // @ id 用于控制弹层唯一标识
          id: 'toast', // 设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式

          // @ anim 层弹出动画
          // , anim: -1 // 关闭/不使用 （就是直接出现）
          // , anim: 0 // 平滑放大。（默认）
          // , anim: 1 // 从上掉落
          // , anim: 2 // 从最底部往上滑入
          // , anim: 3 // 从左滑入
          // , anim: 4 // 从左翻滚
          // , anim: 5 // 渐显
          // , anim: 6 // 抖动

          // @ isOutAnim - 关闭动画
          // , isOutAnim: true // （默认开启）
          // , isOutAnim: false // 停用层关闭时过度动画

          // @ maxmin - 最大最小化
          maxmin: false, // （默认）
          maxmin: true, // 启用

          // @ fixed - 固定
          fixed: true, // （默认）层固定，不随滚动而滚动
          // , fixed: false // 不固定

          // @ resize - 是否允许拉伸
          resize: true, // （默认）允许拉伸

          // @ resizing
          // /**
          //  * @brief: 监听窗口拉伸动作
          //  * @param {*} layero 当前层的DOM对象
          //  * @return {*}
          //  */
          // , resizing: function (layero) {
          //   console.log(layero)
          // }

          // @ scrollbar - 是否允许浏览器出现滚动条 （？暂不知参数作用）
          // , scrollbar: true // （默认）允许浏览器滚动
          // , scrollbar: false // 屏蔽后

          // @ zIndex - 层叠顺序
          zIndex: 1212, // 实际渲染的值会比设置的值 大1

          // @ move - 触发拖动的元素
          move: '.layui-layer-title', // （默认）是弹出层的标题
          // , move: '.mine-move' // 自定义可拖拽元素的`选择器`/DOM

          // @ moveOut - 是否允许拖拽到窗口外
          moveOut: false, // （默认）不允许拖出当前内容窗口
          // , moveOut: true // 允许拖出

          // @ moveEnd -
          /**
           * @brief: 拖动完毕后的回调方法
           * @param {*} layero 当前层的DOM对象
           * @return {*}
           */
          moveEnd: function (layero) {
            console.log('弹层拖动完毕')
            console.log(layero.html())
          },

          // @ tips, topsMore 见单独案例中

          // @ success - 层弹出后的成功回调方法
          /**
           * @brief:
           * @param {*} layero 当前层 DOM对象
           * @param {*} index 当前层的索引值
           * @return {*}
           */
          success: function (layero, index) {
            // console.log(layero.html());
            // setTimeout(function () {
            //   layer.close(index)
            // }, 2000)
          },

          // @
          /**
           * @brief: full/min/restore -分别代表最大化、最小化、还原 后触发的回调
           * @param {*} layero 当前层 DOM
           * @param {*} index 当前层索引
           * ！return false 会阻止当前操作（最大化、最小化、层还原）
           * @return {*}
           */
          max: function (layero, index) {
            console.log('触发最大化')
          },
          min: function (layero, index) {
            console.log('触发最小化')
            // 自定义操作，并阻止默认最小化
            // layer.min(index); // 单独执行最小化
            // return false; // 阻止默认最小化
          },
          restore: function (layero, index) {
            console.log('触发层还原')
          },

          // @ minStack - 是否默认堆叠在左下角
          minStack: true, // （默认）堆叠在左下角
          // , minStack: false // 不堆叠在左下角，堆叠在当前位置
        })
      })
    </script>
  </body>
</html>
